<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--<div class="form-group">-->
<!--        <label for="inputPassword3" class="col-sm-2 control-label">身份证正面照片:</label>-->
<!--        -->
<!--    <div class="col-sm-10">-->
<!--            <input type="hidden" name="img" id="photoUrl"/>-->
<!--            <input type="file" name="logoFile" id="logoFile" οnchange="setImg(this);">-->
<!--            <span><img id="photourlShow" src="" width="300" height="197"/></span>-->
<!--            -->
<!--    </div>-->
<!--</div>-->

<hr/>

<!-- 图片文本框 -->
<input type="file" class="form-control" id="file" name="file" th:onchange="javascript:preview(this)">

<!-- 这个是在上传之前回显图片图片展示 -->
<div id="preview">
    　　<!--这个是为了将页面返回的图片展示出来的.默认隐藏-->
    　　<img style="width: 100px; height: 100px;display:none" id="imgHidden" />
</div>

<!-- 提交...这里pageIndex和pageSize可传可不传,主要取决于提交之后是否需要回到当前页面. -->
<button type="submit" th:onclick="javascript:submitForm([[${pageIndex}]],[[${pageSize}]])" class="btn btn-primary">提交</button>

<!--<script>-->
<!--    //用于进行图片上传，返回地址-->
<!--    function setImg(obj){-->
<!--        var f=$(obj).val();-->
<!--        alert(f);-->
<!--        console.log(obj);-->
<!--        if(f == null || f ==undefined || f == ''){-->
<!--            return false;-->
<!--        }-->
<!--        if(!/\.(?:png|jpg|bmp|gif|PNG|JPG|BMP|GIF)$/.test(f))-->
<!--        {-->
<!--            alert("类型必须是图片(.png|jpg|bmp|gif|PNG|JPG|BMP|GIF)");-->
<!--            $(obj).val('');-->
<!--            return false;-->
<!--        }-->
<!--        var data = new FormData();-->
<!--        console.log(data);-->
<!--        $.each($(obj)[0].files,function(i,file){-->
<!--            data.append('file', file);-->
<!--        });-->
<!--        console.log(data);-->
<!--        $.ajax({-->
<!--            type: "POST",-->
<!--            url: GLOBAL_INFO.WEBURL_PREFIX+"business/uploadImg.xhtml",-->
<!--            data: data,-->
<!--            cache: false,-->
<!--            contentType: false,    //不可缺-->
<!--            processData: false,    //不可缺-->
<!--            dataType:"json",-->
<!--            success: function(ret) {-->
<!--                console.log(ret);-->
<!--                if(ret.code==0){-->
<!--                    $("#photoUrl").val(ret.result.url);//将地址存储好-->
<!--                    $("#photourlShow").attr("src",ret.result.url);//显示图片-->
<!--                    alertOk(ret.message);-->
<!--                }else{-->
<!--                    alertError(ret.message);-->
<!--                    $("#url").val("");-->
<!--                    $(obj).val('');-->
<!--                }-->
<!--            },-->
<!--            error: function(XMLHttpRequest, textStatus, errorThrown) {-->
<!--                alert("上传失败，请检查网络后重试");-->
<!--            }-->
<!--        });-->
<!--    }-->
<!--</script>-->
<script>
    function submitForm(pageIndex, pageSize) {
        var formData = new FormData(); //将需要提交的参数封装起来
        formData.append("id", $("#id").val());
        var zswb = $("#file").val();    //获取file中的内容,看是否有值
        if (zswb == '' || zswb.length < 1) {    //没有file提交的时候走的接口
            $.ajax({
                url : '/editMovieWithoutFile',
                type : 'post',
                data : formData,
                processData : false,
                contentType : false,
                success : function(value) {
                    var result = JSON.parse(value);
                    if (result == 'true') {
                        window.location.href = "/index?pageIndex=" + pageIndex+ "&pageSize=" + pageSize;
                    } else {
                        Lobibox.alert('error', {msg : "媒资信息更新失败!!!"});
                    }
                }
            });
        } else {    //有file提交的时候走的接口
            formData.append("file", $("#file")[0].files[0]);
            $.ajax({
                url : '/editMovieInfo',
                type : 'post',
                data : formData,
                processData : false,
                contentType : false,
                success : function(value) {
                    var result = JSON.parse(value);
                    if (result == 'true') {
                        window.location.href = "/index?pageIndex=" + pageIndex+ "&pageSize=" + pageSize;
                    } else {
                        Lobibox.alert('error', {msg : "媒资信息更新失败!!!"});
                    }
                }
            });
        }
    }

    //图片回显:
    function preview(file) {
        $("#imgHidden").css("display", "none");
        var prevDiv = document.getElementById('preview');
        if (file.files && file.files[0]) {
            var reader = new FileReader();
            reader.onload = function(evt) {
                prevDiv.innerHTML = '<img style="width: 100px;height: 100px;" src="' + evt.target.result + '" />';
            }
            reader.readAsDataURL(file.files[0]);
        } else {
            prevDiv.innerHTML = '<div class="img" style="width: 100px;height:100px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' +
                file.value + '\'"></div>';
        }
    }
</script>
</body>
</html>